<template>
  <div id="Admin">
    <logo class="logo"></logo>
    <transition name="login" appear>
      <div class="login">
        <div class="title">
          <h3>社区管理系统</h3>
        </div>
        <form action="JavaScript:;" method="post" class="login_form">
          <label for="username">
            <input type="text" autocomplete="off" v-model="username" name="username" id="username" placeholder="用户名">
          </label>
          <label for="password">
            <input type="password" v-model="password" placeholder="密码" name="password" id="password">
          </label>
          <input type="submit" value="登录" class="btn" @click="toLogin">
        </form>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import Logo from "../header/logo.vue"
export default {
  name: 'Login',

  data() {
    return {
      username: '', // 用户名
      password:'' // 密码
    };
  },

  mounted() {
    
  },

  methods: {
    // 登录
    toLogin(){
      this.$api.adminToLogin({
        username: this.username,
        password: this.password
      }).then(res => {
        if(res == 1){
          this.showHint({isFlag: true,title: "登录成功"})
          this.$router.push('Admin/home')
        }else{
          this.showHint({isFlag: false,title: res})
        }
      })
    },
    ...mapActions(['showHint'])
  },

  components: {
    Logo
  }
};
</script>

<style scoped>
#Admin{
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/image/gif/adminBG.gif');
  background-size: cover;
}
.login{
  padding: 10px 30px;
  background-color: rgba(0, 0, 0, .5);
  width: 300px;
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translate(0,-50%);
  text-align: center;
  border-radius: 20px;
}
.title h3{
  font-family: "STFangsong";
  color: white;
}
#Admin .logo{
  position: absolute;
  top: 10px;
  left: 10px;
  transform-origin: top left;
  transform: scale(1.2);
}
.login label input{
  width: 200px;
  height: 30px;
  padding-left: 5px;
  margin: 5px;
  outline: none;
}
.login_form{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login_form .btn{
  width: 60px;
  height: 30px;
  background: -webkit-linear-gradient(left, #ff00f2, #04ffc0);
  background-position: 0,0;
  background-size: 200%;
  color: white;
  cursor: pointer;
  border: none;
  transition: all .5s;
  margin-top: 10px;
}
.login_form .btn:hover{
  background-position: 100%,100%;
}
.login-enter{
  right: 100px;
  opacity: 0;
}
.login-enter-active{
  transition: all .5s;
}
.login-enter-to{
  opacity: 1;
}
</style>